<template>
  <div class="handle-null-outliers">
    <div class="replace-box replace-group">
      <span style="color: #f00;">*</span>
      <span>替换方法:</span>
      <a-select
        v-model="replaceMethod"
        :show-arrow="true"
        style="height: 24px; margin-top: 4px; width: 184px;"
        @change="emitReplaceParams"
      >
        <a-select-option
          v-for="(item, index) in methodList"
          :key="index"
          :value="item.key"
          :disabled="item.key !== 'manual'"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </div>
    <div v-if="replaceMethod === 'manual'" class="replace-box">
      <span style="color: #f00;">*</span>
      <span>将Null值替换为:</span>
      <a-input
        v-model="replaceText"
        size="small"
        placeholder="Null"
        style="font-size: 12px; height: 24px; margin-top: 4px; width: 184px;"
        @change="emitReplaceParams"
      />
      <p v-if="!checkInputName()" class="warning-text">
        {{ inputNameErr }}
      </p>
    </div>
    <div class="replace-box replace-group">
      <span style="color: #f00; margin-top: 12px;">*</span>
      <span style="margin-right: 10px; margin-top: 12px;">处理结果: </span><br />
      <a-radio-group v-model="resultValue" @change="emitReplaceParams">
        <a-radio class="replace-radio" :value="0"> 直接替换 </a-radio>
        <a-radio class="replace-radio" :value="1"> 生成新字段 </a-radio>
      </a-radio-group>
    </div>
    <div v-if="resultValue === 1" class="replace-box">
      <span style="color: #f00;">*</span>
      <span>新列名:</span>
      <a-input
        v-model="newCol"
        size="small"
        placeholder=""
        style="font-size: 12px; height: 24px; margin-top: 4px; width: 184px;"
        @change="emitReplaceParams"
      />
      <p v-if="!checkColName()" class="warning-text">
        {{ columnNameErr }}
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { IColumn, IKeyValueStore } from '@/store/modules/dataview'
import { StatisticsAction } from '@/util/data-selection-actions'

@Component
export default class HandleNullOutliers extends Vue {
  @Prop() column!: IColumn
  @Prop() editData!: any
  @Prop({ default: false }) isEdit!: boolean
  @Prop({ default: '' }) parentTableName!: boolean
  @Prop() columnList!: IColumn[]
  public methodList: any = []
  public replaceMethod: string = 'manual'
  private replaceText: string = ''
  private resultValue: number = 0
  private newCol: string = `${this.column.name}_1`
  private columnNameErr: string = ''
  private inputNameErr: string = ''
  private historyColName: string = ''

  mounted() {
    this.generateMetList()
    this.emitReplaceParams()
  }

  public generateMetList() {
    this.methodList.push({
      name: '手动输入',
      key: 'manual',
    })
  }

  //  列名是否一致【需要去除列名空白符的比较】
  public checkColName() {
    if (this.newCol.trim().length === 0 && this.resultValue === 1) {
      this.columnNameErr = '列名不能为空，请重新输入'
      return false
    }
    for (let i = 0, { length } = this.columnList; i < length; i += 1) {
      if (this.columnList[i].name === this.newCol.trim()) {
        if (this.newCol && this.newCol.trim() === this.historyColName.trim()) {
          // eslint-disable-next-line no-continue
          continue
        } else {
          this.columnNameErr = '列名已存在，请重新输入'
          return false
        }
      }
    }
    this.columnNameErr = ''
    return true
  }

  public checkInputName() {
    const columnType: string = `${this.column.desc}`
    const isTypeNumber = ['int', 'decimal'].includes(columnType)
    if (this.replaceText.length === 0 || !isTypeNumber) {
      return true
    }
    const testNumber = /^[\d.|]*$/
    const isInputNumber = testNumber.test(this.replaceText)

    // 只需要考虑输入为string，但目标列为int或decimal的情况
    if (!isInputNumber && isTypeNumber) {
      this.inputNameErr = `与列类型${columnType}不匹配，请重新输入`
      return false
    }
    return true
  }

  @Watch('editData', { immediate: true, deep: true })
  private onCurrentHistory(newValue: IKeyValueStore) {
    if (!newValue || !this.isEdit) {
      return
    }
    const history = newValue.data
    if (
      history.actionType === StatisticsAction.handleNullOutliers &&
      history.filter[0][0].col === this.column.name
    ) {
      this.replaceText = history.setValue
      this.replaceMethod = history.setValuePolicy
      if (history.newCol) {
        this.newCol = history.newCol
        this.historyColName = history.newCol
        this.resultValue = 1
      }
    }
  }

  private emitReplaceParams() {
    if (!this.checkColName() || !this.checkInputName()) {
      this.$emit('on-filter-params-reset')
      return
    }
    this.$emit('on-filter-params-change', {
      data: {
        filter: [
          [
            {
              col: this.column.name,
              filterType: '=',
              values: ['#NULL'],
            },
          ],
        ],
        action: 'TRANSFORM_SET',
        transformType: 'FILTER',
        col: this.column.name,
        setValue: this.replaceText,
        actionType: StatisticsAction.handleNullOutliers,
        description: `${
          this.resultValue === 1 ? `创建新列${this.newCol}并` : ''
        }将空单元格替换为 ${this.replaceText ? this.replaceText : 'Null值'}`,
        newCol: this.resultValue === 1 ? this.newCol : '',
        setValuePolicy: this.replaceMethod,
      },
    })
  }
}
</script>

<style lang="less" scoped>
.handle-null-outliers {
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    height: 1px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #cacaca;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #ededed;
    border-radius: 6px;
  }

  .ant-input {
    width: 40%;
  }

  .replace-group {
    margin-top: 10px;
  }

  .replace-box {
    padding-top: 2px;

    span {
      color: #5d637e;
      font-size: 12px;
      font-weight: 400;
      height: 17px;
      letter-spacing: 0;
      line-height: 17px;
    }

    .replace-radio {
      color: #5d637e;
      font-size: 12px;
      font-weight: 400;
      height: 16px;
      line-height: 16px;
    }

    .warning-text {
      color: #e6505a;
      display: inline-block;
      margin: 0;
      word-break: break-word;
    }
  }
}

/deep/ .ant-select-selection--single {
  align-content: center;
  align-items: center;
  display: flex;
  font-size: 12px;
  height: 24px;
  justify-content: flex-start;
}
</style>
